<template>
    <div class="detect-box app-container tz-app">
        <div class="zt-select flex-s">
            <div class="flex-left flex">
                <el-input class="zt-input rihgt-m5" v-model="queryParams.radioStationTaskName" placeholder="任务名称" />
                <button class="bt-blue " @click="handleQuery">筛选</button>
            </div>
            <button class="bt-yellow " @click="handleAdd">新增</button>
        </div>

        <div class="tz-table-box" style="height:calc(100vh - 250px);">
            <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange"
                height="calc(100vh - 250px)" class="zt-table" :empty-text="'暂无数据'">
                <el-table-column show-overflow-tooltip label="任务ID" align="center" prop="radioStationTaskId"
                    width="100" />
                <el-table-column show-overflow-tooltip label="任务名称" align="center" prop="radioStationTaskName" />
                <el-table-column show-overflow-tooltip label="创建时间" align="center" prop="createTime" />
                <el-table-column show-overflow-tooltip label="发射电台名称" align="center" prop="srcName" />
                <el-table-column show-overflow-tooltip label="接收电台名称" align="center" prop="dstName">
                    <template slot-scope="{row}">
                        {{ row.dstName.join("/") }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="开始时间" align="center" prop="beginTime" />
                <el-table-column show-overflow-tooltip label="结束时间" align="center" prop="endTime" />
                <el-table-column show-overflow-tooltip label="状态" align="center" prop="isUsed" width="80">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isUsed == 0" class="red">停用</div>
                        <div v-if="scope.row.isUsed != 0">启用</div>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="操作" align="center" class-name="small-padding fixed-width"
                    width="210">
                    <template slot-scope="scope">
                        <img title="复制" @click="copy(scope.row)" src="@/assets/images/copy-img.png" class="click-img" />
                        <img title="详情" @click="handleDetails(scope.row)" src="@/assets/images/eye-fill.png"
                            class="click-img" />
                        <img title="编辑" @click="handleUpdate(scope.row)" src="@/assets/images/amend.png"
                            class="click-img" />
                        <img title="删除" @click="handleDelete(scope.row)" src="@/assets/images/delete-bin2.png"
                            class="click-img" />
                        <img title="启用" v-if="scope.row.isUsed == '0'" @click="start(scope.row.radioStationTaskId)"
                            class="click-img on-off" src="@/assets/images/start-img.png" />
                        <img title="停止" v-if="scope.row.isUsed == '1'" @click="stop(scope.row.radioStationTaskId)"
                            class="click-img on-off" src="@/assets/images/stop-img.png" />
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <div class="zt-pagination">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>


        <right-dialog :title="title" :visible="open" @closeDialog="cancel">
            <template v-slot:default>
                <div class="zt-dialog-solt" style="width: 900px;">
                    <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right"
                        style="max-height: calc(100% - 40px); overflow: auto;margin-bottom: 20px;">
                        <div class="flex">
                            <el-form-item label="任务名称:">
                                <el-input class="zt-input" v-model="form.radioStationTaskName" placeholder="任务名称" />
                            </el-form-item>
                            <el-form-item label="接收方案:">
                                <el-select v-model="form.receiveType" placeholder="选择接收方案" class="blank-input"
                                    style="width:250px;">
                                    <el-option v-for="item in receiveTypes" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <div class="flex">
                            <el-form-item label="发射电台:">
                                <el-select v-model="form.srcId" placeholder="选择发送电台" class="blank-input"
                                    style="width:250px;">
                                    <el-option v-for="item in stationAll.station.filter(st=>st.status == '0')" :key="item.radioStationCode"
                                        :label="item.radioStationName" :value="item.radioStationCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接收电台:">
                                <el-select v-model="form.dstList" placeholder="接收电台" class="blank-input"
                                    style="width:250px;" multiple collapse-tags>
                                    <el-option v-for="item in stationList" :key="item.radioStationCode"
                                        :label="item.radioStationName" :value="item.radioStationCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <div class="flex">
                            <el-form-item label="执行时段:">
                                <el-date-picker @change="rangeDateChange" v-model="rangeDate" type="daterange"
                                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="启用状态:">
                                <el-select v-model="form.isUsed" placeholder="选择启停" class="blank-input"
                                    style="width:150px;">
                                    <el-option v-for="item in isUsedList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <i @click="addDst" class="el-icon-circle-plus" title="添加接收电台"
                            v-if="!dstList || dstList.length == 0"
                            style="color: #46E5CB;font-size: 20px;cursor: pointer;margin-left: 10px;"></i>
                        <div v-else v-for="dst, index in dstList" style="overflow: hidden;">
                            <div style="float: left;">
                                <el-form-item label="接收电台:">
                                    <el-select v-model="dstList[index].dstId" placeholder="接收电台" class="blank-input"
                                        style="width:150px;">
                                        <el-option v-for="item in stationAll.station" :key="item.radioStationCode"
                                            :label="item.radioStationName" :value="item.radioStationCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="float: left;">
                                <el-form-item label="接收频率:" label-width="80px">
                                    <el-input-number :controls="false" style="width: 100px;" placeholder="接收频率"
                                        v-model="dstList[index].freq" class="blank-input m-10"></el-input-number><span
                                        class="unit">MHz</span>
                                </el-form-item>
                            </div>
                            <div style="float: left;">
                                <el-form-item label="采样率:" label-width="60px">
                                    <el-input-number :controls="false" style="width: 100px;" placeholder="接收采样率"
                                        v-model="dstList[index].sampleFreq"
                                        class="blank-input m-10"></el-input-number><span class="unit">KHz</span>
                                </el-form-item>
                            </div>
                            <div style="float: left;">
                                <i @click="removeDst(index)" class="el-icon-error" title="删除接收电台"
                                    style="color: burlywood;font-size: 20px;cursor: pointer;line-height: 36px;margin-left: 5px;"></i>
                                <i @click="addDst" class="el-icon-circle-plus" title="添加接收电台"
                                    v-if="index == dstList.length - 1"
                                    style="color: #46E5CB;font-size: 20px;cursor: pointer;margin-left: 10px;"></i>
                            </div>
                        </div> -->

                        <el-form-item label="任务设置:" prop="pltTaskItems">
                            <TaskItem :arr="form.pltTaskItems" @setItemList="setItemList" v-if="open"></TaskItem>
                        </el-form-item>

                    </el-form>
                    <div class="flex">
                        <el-button class="bt-blue " @click="submitForm" style="margin-left: 50px; ">确定</el-button>
                    </div>
                </div>
            </template>
        </right-dialog>

        <right-dialog :title="title" :visible="openDetails" @closeDialog="cancel">
            <template v-slot:default>
                <div class="zt-dialog-solt">
                    <el-form ref="form" :model="detail" :disabled="true" :rules="rules" label-width="120px">
                        <el-form-item label="任务名称:">
                                <el-input class="zt-input" v-model="detail.radioStationTaskName" placeholder="任务名称" />
                        </el-form-item>

                        <div class="flex">
                            <el-form-item label="发射电台:">
                                <el-select v-model="detail.srcId" disabled placeholder="发送电台" class="blank-input"
                                    style="width:200px;">
                                    <el-option v-for="item in stationAll.station" :key="item.radioStationCode"
                                        :label="item.radioStationName" :value="item.radioStationCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <!-- <el-form-item label="接收电台:">
                                <el-select v-model="detail.dstId" disabled placeholder="接收电台" class="blank-input"
                                    style="width:200px;">
                                    <el-option v-for="item in stationAll.station" :key="item.radioStationCode"
                                        :label="item.radioStationName" :value="item.radioStationCode">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                        </div>

                        <el-form-item label="执行时段:">
                            <el-date-picker v-model="rangeDate" type="daterange" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                :style="{ backgroundColor: '#f5f5f5', color: '#333' }">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="任务执行情况:" prop="pltTaskItems">
                            <TaskReceive :arr="detail.pltTaskItems" v-if="openDetails"></TaskReceive>
                        </el-form-item>

                    </el-form>
                </div>
            </template>
        </right-dialog>

    </div>
</template>

<script>
import { listTask, getTask, delTask, addTask, updateTask, getTaskReceive, station_off_on } from "@/api/business/task";
import { getRadioStationList } from "@/api/business/station";
import RightDialog from "@/components/TZ/RightDialog"
import TaskItem from '@/components/TZ/TaskItem/index.vue';
import TaskReceive from '@/components/TZ/TaskReceive/index.vue';

export default {
    components: { RightDialog, TaskItem, TaskReceive },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 任务表格数据
            taskList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openDetails: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                radioStationTaskId: null,
                radioStationTaskName: null,
                createTime: null,
                srcName: null,
                dstName: null,
                beginTime: null,
                endTime: null,
                isUsed: null,
                remark: null,
                receiveType: "1",
                pltTaskItems: [],
            },
            receiveTypes: [
                { "label": "电台", "value": "0" },
                { "label": "SDR", "value": "1" },
                // { "label": "电台和SDR", "value": "2" },
            ],
            isUsedList: [
                { "label": "停用", "value": "0" },
                { "label": "启用", "value": "1" },
            ],
            // 表单参数
            form: {
                isUsed: '0'
            },
            // 接收电台
            dstList: [],
            // 表单校验
            rules: {
            },
            isNet: 0,
            typeListAll: false,//true=新增,false=修改
            stationAll: {
                station: [],//电台集合
            },
            rangeDate: [],
            detail: {},
        };
    },
    created() {
        this.getList();
        this.getStationAll();
        this.rangeDateChange()
    },
    computed: {
        stationList() {
            if(!this.form.receiveType) return [];
            // 电台
            if(this.form.receiveType == '0') return this.stationAll.station.filter(item=>item.status == '0')
            // SDR
            if(this.form.receiveType == '1') return this.stationAll.station.filter(item=>item.sdrStatus == '0')
        }
    },
    methods: {
        // 添加接收电台
        addDst() {
            this.dstList.push({})
        },
        // 删除接收电台
        removeDst(index) {
            if (this.dstList.length <= 1) {
                this.dstList = [{}]
            } else {
                this.dstList.splice(index, 1)
            }
        },
        /** 查询任务列表 */
        getList() {
            this.form = {}
            this.loading = true;
            listTask(this.queryParams).then(response => {
                this.taskList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.openDetails = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                radioStationTaskId: null,
                radioStationTaskName: null,
                createTime: null,
                srcName: null,
                dstName: null,
                beginTime: null,
                endTime: null,
                isUsed: '0',
                remark: null,
                receiveType: "1",
                pltTaskItems: [],
            };
            this.dstList = [{}]
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.radioStationTaskId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加任务";
            this.typeListAll = true;
            this.rangeDate = [];
        },
        copy(row) {
            this.handleUpdate(row, true);
        },
        /** 修改按钮操作 */
        handleUpdate(row, copy) {
            //this.reset();
            this.typeListAll = false;
            const radioStationTaskId = row.radioStationTaskId || this.ids
            getTask(radioStationTaskId).then(response => {
                if (copy) {
                    let copyRow = response.data;
                    delete copyRow.radioStationTaskId;
                    this.form = copyRow;
                    if (copyRow.dstList && copyRow.dstList.length > 0) {
                        this.dstList = JSON.parse(JSON.stringify(copyRow.dstList))
                    } else if (copyRow.dstId) {
                        this.dstList = [{ dstId: copyRow.dstId }]
                    } else {
                        this.dstList = [{}]
                    }
                    this.setRangeDate();
                    this.open = true;
                    this.title = "复制任务";
                    console.log("复制：", this.form)
                } else {
                    this.form = response.data;
                    if (response.data.dstList && response.data.dstList.length > 0) {
                        let dstList = JSON.parse(JSON.stringify(response.data.dstList)).map(item => {
                            return {
                                ...item,
                                freq: item.freq / (10 ** 6),
                                sampleFreq: item.sampleFreq / (10 ** 3),
                            }
                        })
                        this.dstList = dstList
                    } else if (response.data.dstId) {
                        this.dstList = [{ dstId: response.data.dstId }]
                    } else {
                        this.dstList = [{}]
                    }
                    this.setRangeDate();
                    this.open = true;
                    this.title = "修改任务";
                }
            });
        },
        handleDetails(row) {
            const radioStationTaskId = row.radioStationTaskId || this.ids
            getTaskReceive(radioStationTaskId).then(response => {
                this.detail = response.data;
                this.toRangeDate();
                this.openDetails = true;
                this.title = "任务接收详情";
            });
        },
        // 启用
        start(radioStationTaskId) {
            station_off_on({ radioStationTaskId, isUsed: '1' }).then(response => {
                this.$modal.msgSuccess("启用成功");
                this.getList();
            });
        },
        // 停用
        stop(radioStationTaskId) {
            station_off_on({ radioStationTaskId, isUsed: '0' }).then(response => {
                this.$modal.msgSuccess("停止成功");
                this.getList();
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                let upForm = JSON.parse(JSON.stringify(this.form));
                for (var i = 0; i < upForm.pltTaskItems.length; i++) {
                    upForm.pltTaskItems[i].freq *= 1000000;
                    upForm.pltTaskItems[i].sampleFreq *= 1000;
                    upForm.pltTaskItems[i].rcvFreq *= 1000000;
                    upForm.pltTaskItems[i].rcvSampleFreq *= 1000;
                }
                // let dstList = JSON.parse(JSON.stringify(this.dstList)).map(item => {
                //     return {
                //         ...item,
                //         freq: item.freq * 10 ** 6,
                //         sampleFreq: item.sampleFreq * 10 ** 3,
                //     }
                // })
                // upForm.dstList = dstList;
                if (valid) {
                    if (upForm.radioStationTaskId != null) {
                        updateTask(upForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addTask(upForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });

        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const radioStationTaskIds = row.radioStationTaskId || this.ids;
            this.$modal.confirm('是否确认删除电台编号为"' + radioStationTaskIds + '"的数据项？').then(function () {
                return delTask(radioStationTaskIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        async getStationAll() {//获取集合数据
            const data = {
                isNet: 1
            }
            getRadioStationList(data).then(rs => {
                let list = rs.rows;
                this.stationAll.station = list;
            });
        },
        rangeDateChange(r) {
            if (null != r) {
                this.form.beginTime = r[0] + " 00:00:00";
                this.form.endTime = r[1] + " 23:59:59";
            }
        },
        setRangeDate() {
            this.rangeDate = [this.form.beginTime, this.form.endTime]
        },
        toRangeDate() {
            this.rangeDate = [this.detail.beginTime, this.detail.endTime]
        },
        setItemList(newList) {
            this.form.pltTaskItems = newList;
        }
    }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner {
    background: #394760;
    border: none;
    border-radius: 50px;
    color: white;
}

.el-range-editor--medium ::v-deep.el-range-input {
    background: #394760;
    border: none;
    color: white;
}

.click-img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-right: 10px;
}

.on-off {
    width: 60px;
    height: 25px;
    vertical-align: sub;
}

.el-form-item ::v-deep.is-disabled .el-input__inner {
    background: #394760;
    border: none;
    border-radius: 50px;
}

.el-form-item ::v-deep.is-disabled {
    background: #394760 !important;
    border: none;
    border-radius: 50px;
}

.el-input-number ::v-deep.el-input__inner {
    text-align: left !important;
}
</style>
